<template>
  <div class="pending customerDetail">
    <h3 class="title">客户详情</h3>
    <div class="detailBox">
      <div class="infoTit">基本信息 <i class="el-icon-edit" @click="changeInfo" /></div>
      <div class="itemBox">
        <div class="itemInfo"><label>客户手机号：</label>{{ customerInfo.phone }}</div>
        <div class="itemInfo"><label>客户昵称：</label>{{ customerInfo.name }}</div>
        <div class="itemInfo"><label>成为客户时间：</label>{{ customerInfo.time }}</div>
      </div>
      <div class="itemBox">
        <div class="itemInfo"><label>来源方式：</label>{{ customerInfo.source }}</div>
        <div class="itemInfo"><label>性别：</label>{{ customerInfo.sex }}</div>
        <div class="itemInfo"><label>生日：</label>{{ customerInfo.birthday ? customerInfo.birthday : '—' }}</div>
      </div>
      <div class="itemBox">
        <div class="itemInfo"><label>客户标签：</label>{{ customerInfo.labelName ? customerInfo.labelName : '—' }}</div>
        <div class="itemInfo"><label>备注：</label>{{ customerInfo.remark ? customerInfo.remark : '无' }}</div>
      </div>
      <div class="tradeInfoTit">交易信息</div>
      <div class="tradeInfo">
        <div class="tradeItem">
          <div class="tradeTit">累积消费金额（元）</div>
          <div class="tradeValue">{{ customerInfo.total ? customerInfo.total : '0' }}</div>
        </div>
        <div class="tradeItem">
          <div class="tradeTit">累计消费订单数</div>
          <div class="tradeValue">{{ customerInfo.frequency ? customerInfo.frequency : '0' }}</div>
        </div>
        <div class="tradeItem">
          <div class="tradeTit">最近下单时间</div>
          <div class="tradeValue">{{ customerInfo.lastTime ? customerInfo.lastTime : '—' }}</div>
        </div>
        <div class="tradeItem">
          <div class="tradeTit">累计退款金额</div>
          <div class="tradeValue">{{ customerInfo.refundMoney ? customerInfo.refundMoney : '0' }}</div>
        </div>
        <div class="tradeItem">
          <div class="tradeTit">累计退款订单数</div>
          <div class="tradeValue">{{ customerInfo.refunds ? customerInfo.refunds : '0' }}</div>
        </div>
      </div>
    </div>
    <!-- 详情弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      title="修改客户基本信息"
      :visible.sync="isDataVisible"
      width="30%"
      top="50px"
      class="group-dialog"
    >
      <div class="changeCustomer">
        <el-form ref="form" :model="basicInfo" label-width="100px">
          <el-form-item label="客户手机号" >
            <span>{{ basicInfo.phone }}</span>
          </el-form-item>
          <el-form-item class="inputWide" label="客户昵称" >
            <el-input v-model="basicInfo.name" placeholder="请输入内容" maxlength="10" onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" show-word-limit />
          </el-form-item>
          <el-form-item class="inputWide" label="性别" >
            <el-radio v-model="basicInfo.sex" label="男">男</el-radio>
            <el-radio v-model="basicInfo.sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item class="inputWide" label="生日" >
            <el-date-picker
              v-model="basicInfo.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item class="inputWide" label="标签" >
            <el-select
              v-model="basicInfo.ids"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 100%;"
            >
              <el-option
                v-for="item in tagList"
                :key="item.labelId"
                :label="item.labelName"
                :value="item.labelId"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="inputWide" label="备注" >
            <el-input
              v-model="basicInfo.remark"
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveChangeCustomer">保 存</el-button>
        <el-button @click="closeChange">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updateCustomer, getCustomerDetail, getLabelData } from '@/api/customer'
export default {
  name: 'CustomerDetail',
  data() {
    return {
      isDataVisible: false,
      buyerUserId: this.$route.query.buyerUserId,
      customerInfo: {}, // 客户详情
      basicInfo: {
        birthday: '',
        buyerUserId: '',
        ids: [],
        name: '',
        phone: '',
        remark: '',
        sex: ''
      },
      tagList: [] // 标签列表
    }
  },
  mounted() {
    if (this.buyerUserId) {
      this.getCustomerInfo()
      this.getTagList()
    }
  },
  methods: {
    // 修改基本信息
    changeInfo() {
      this.isDataVisible = true
    },
    getCustomerInfo() {
      getCustomerDetail({ buyerUserId: this.buyerUserId }).then(res => {
        if (res.code === '') {
          this.customerInfo = res.data
          this.basicInfo.birthday = this.customerInfo.birthday
          this.basicInfo.buyerUserId = this.customerInfo.buyerUserId
          this.basicInfo.ids = this.customerInfo.ids
          this.basicInfo.name = this.customerInfo.name
          this.basicInfo.phone = this.customerInfo.phone
          this.basicInfo.remark = this.customerInfo.remark
          this.basicInfo.sex = this.customerInfo.sex
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    async getTagList() {
      const res = await getLabelData()
      if (res.code === '') {
        this.tagList = res.data
        console.log(this.tagList, 'taglist')
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
    },
    saveChangeCustomer() {
      updateCustomer(this.basicInfo).then(res => {
        if (res.code === '') {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getCustomerInfo()
          this.isDataVisible = false
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    closeChange() {
      this.isDataVisible = false
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../styles/elDialog.scss");

.pending {
  margin: 20px;
}
.customerDetail {
  padding: 30px 30px 200px 30px;
  background: #FFFFFF;
  height: 100%;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: #333333;
  }
  .detailBox {
    .infoTit {
      margin: 30px 0;
      font-size: 20px;
      color: #333333;
      height: 50px;
      line-height: 50px;
      i {
        cursor: pointer;
      }
    }
    .tradeInfoTit {
      margin: 50px 0 30px 0;
      font-size: 20px;
      color: #333333;
      height: 50px;
      line-height: 50px;
    }
    .itemBox {
      display: flex;
      margin-bottom: 30px;
      .itemInfo {
        width: 350px;
        display: flex;
        color: #666666;
        font-size: 16px;
        label {
          width: 120px;
          text-align: right;
          display: block;
          color: #333333;
        }
      }
    }
    .tradeInfo {
      display: flex;
      .tradeItem {
        width: 250px;
        text-align: center;
        .tradeTit {
          font-size: 16px;
          margin-bottom: 25px;
        }
        .tradeValue {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
<style scoped>
/* .changeCustomer .inputWide /deep/ .el-form-item__content {
  width: 280px;
}
.changeCustomer .inputWide /deep/ .el-select {
  width: 280px;
} */
.customerDetail /deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #FFFFFF;
}
/* .changeCustomer /deep/ .el-date-editor--date {
  width: 280px;
} */
</style>
